<script>
export default {
  name: 'YsDescriptions',
  props: {
    data: {
      type: Function,
      default: undefined
    },
    title: {
      type: String,
      default: undefined
    },
    fields: {
      type: Object,
      default: undefined
    }
  },
  data () {
    return {
      card: {
        loading: true
      },
      row: {}
    }
  },
  mounted () {
    this.data().then((data) => {
      this.row = data
      this.card.loading = false
    }).catch(() => {
      this.card.loading = false
    })
  },
  render () {
    return (<a-card class="detail" bordered={false} loading={this.card.loading} title={this.title}>{
      (() => {
        if (Object.keys(this.row).length === 0) {
          return (<a-empty />)
        }
        return (<a-descriptions bordered size="small">
          {
            Object.keys(this.fields).map(key => {
              if (typeof this.fields[key] === 'object') {
                const {
                  title,
                  formatter
                } = this.fields[key]
                return (<a-descriptions-item span={3} label={title}>{formatter.call(this, this.row[key], this.row)}</a-descriptions-item>)
              } else {
                return (<a-descriptions-item span={3} label={this.fields[key]}>{this.row[key]}</a-descriptions-item>)
              }
            })
          }
        </a-descriptions>)
      })()
    }</a-card>)
  }
}
</script>

<style lang="less" scoped>
.detail {
  /deep/ .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-label {
    width: 12%;
  }

  /deep/ .ant-tree-node-content-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.65);
    background-color: #bae7ff;
  }
}
</style>
